<template>
  <el-container>
<el-header>
  <div id="title">课程班级</div>
              <div><i class="el-icon-search" id="icon" ></i></div>
              <el-input v-model="input" placeholder="搜索课程" id="input"></el-input>
              <div id="jia">加入班级</div>
              <div id="tong">通知</div>
              <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
</el-header>
<el-main style="background-color: white;">
  <div id="title1">发布任务</div>
  <div id="box">
    <el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="任务名称" style="position: absolute; left:34%;top:30%">
    <el-input v-model="form.name" style="width: 400px;"></el-input>
  </el-form-item>
  <el-form-item label="任务描述" style="position:absolute;top:40%;left: 34%;">
    <el-input type="textarea" v-model="form.desc" style="width: 400px" :rows="4"></el-input>
  </el-form-item>
  <el-form-item label="发布方式" style="position: absolute;top: 55%;left: 34%;">
    <el-radio-group v-model="form.way">
      <el-radio label="统一发布"></el-radio>
      <el-radio label="分班发布"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="任务时间" style="width: 400px;position: absolute;top: 65%;left: 34%;">
    <el-col >
      <el-date-picker type="date" placeholder="开始时间" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col :span="1">-</el-col>
    <el-col >
      <el-time-picker placeholder="结束时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item style="position: absolute;top:85%;left: 38%;">
    <el-button type="primary" @click="onSubmit">立即发布</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
  </div>
</el-main>
</el-container>
</template>
<style>
#box{
  border: black 1px solid;
  height: 500px;
  width: 80%;
  margin-top: 8%;
  margin-left: 10%;
}
#title1{
  font-size: 30px;
  color: black;
  position: absolute;
  top:8%;
  left: 10%;
}
.grid-cotainer{
  display:grid;
  grid-template-columns: repeat(3,300px);
  grid-gap:50px;
}
.grid-item{
  padding: 20px;
  border:1px solid;
  border-radius: 5px;
}
.el-col {
  border-radius: 4px;
}
.el-row {
  margin-bottom: 20px;
}
.bg-purple-light {
  background: #0c2152;
}
.bg-purple-dark {
  background: #830608;
}
.el-header{
  background-color: rgb(85,85,85);
  color: #333;
  text-align: center;
  line-height: 80px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#title{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:80px;
}
#icon{
  color: white;
  font-size: 25px;
  position: absolute;
  top:30px;
  left:700px;
}
#input{
  height:33px;
  width:230px;
  position: absolute;
  top:-30px;
  left:700px;
}
#jia{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:1000px;
}
#tong{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:1200px;
}
#icon1{
  color: white;
  font-size:40px;
  position: absolute;
  top:20px;
  left: 1350px;
}
</style>
<script>
import axios from 'axios'
export default {
  data(){
      return{
        form: {
          name: '',
          desc: '',
          way:'',
          date1:'',
          date2:'',
          id:''
        },
      }
  },
  mounted(){
    this.id=this.$route.params.courseid
  },
  methods:{
      handleicon(){
    this.$router.push('/StuPage')
  },
  onSubmit(){
    //提交任务发布信息 id-课程的id form-表单
    //表单包含name-任务名称，desc-任务描述，way-发布方式（统一发布和分班发布），date1-任务开始时间 date2-任务结束时间
    //返回succuss==true表示发布成功
    axios.post('',{
      form:this.form,
      id:this.id
    }).then(res=>{
      if(res.data.success){
        alert('发布成功')
      }
    })
  }
  }
}
</script>